<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>编辑你的文章</title>
    <meta name="description" content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>

    <meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0"/>

    <!-- Loading Bootstrap -->
    <link href="dist/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Loading Flat UI -->
    <link href="dist/css/flat-ui.css" rel="stylesheet"/>
    <link href="docs/assets/css/demo.css" rel="stylesheet"/>

    <link rel="shortcut icon" href="img/favicon.ico"/>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="dist/js/vendor/html5shiv.js"></script>
    <script src="dist/js/vendor/respond.min.js"></script>
    <![endif]-->
    <script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
    <script type="text/javascript">
        /*<![CDATA[*/
        var app = angular.module('app', []);
        app.controller('MainController', function($rootScope, $scope, $http) {
            $scope.message = '';
            $scope.account = '';
            $scope.password = '';

            //登录
            $scope.login = function() {
                $scope.message = '';
                $http(
                    {
                        url : '/loginPost',
                        method : 'POST',
                        headers : {
                            'Content-Type' : 'application/x-www-form-urlencoded'
                        },
                        data : 'account=' + $scope.account + '&password='
                        + $scope.password
                    }).success(function(r) {
                    if (!r.success) {
                        $scope.message = r.message;
                        return;
                    }
                    window.location.href = '/write';
                });
            }

        });

        /*]]>*/
    </script>
    <style type="text/css">
        tr{
           margin-top: 20px;
        }
        td{
            padding-bottom: 12px;
            width: 350px;
            height: 80px;
        }
        input{
            width: 250px; !important;
        }
        table{
            margin-left: 150px;
        }
        .container{
            text-align: center;
        }
        form{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
<h3 th:text="'欢迎编写文章：   '+${name}"></h3>
    <form class="">
        <table>
            <tr>
                <td>
                    日期：
                </td>
                <td>
                    <input type="text" id="date" placeholder="请选择日期" class="form-control col-xs-20"/>
                </td>
            </tr>
            <tr>
                <td>
                    类型:
                </td>
                <td>
                    <input type="text" id="type" name="type" placeholder="请输入类型" class="form-control col-xs-20"/>
                </td>
            </tr>
            <tr>
                <td>
                    名称:
                </td>
                <td>
                    <input type="text" id="name" name="name" placeholder="请输入名称" class="form-control col-xs-20"/>
                </td>
            </tr>
            <tr>
                <td>
                    小结:
                </td>
                <td>
                    <input type="text" id="summary" name="summary" placeholder="请输入小结" class="form-control col-xs-20"/>
                </td>
            </tr>
            <tr>
                <td>
                    具体内容:
                </td>
                <td>
                    <textarea type="text" id="detail" name="detail" placeholder="请输入具体内容" class="form-control col-xs-20"/>
                </td>
            </tr>
            <tr>
                <td>
                海报:
                </td>
                <td>
                    <input type="text" id="postimg" name="postimg" placeholder="请输入海报地址" class="form-control col-xs-20" />
                </td>
            </tr>
            <tr>
                <td>
                    <button type="reset" name="reset" id="reset" value="重填" class="btn btn-block btn-lg btn-danger btn-lg">重置</button>
                </td>
                <td>
                    <button type="button" name="submit" id="submit"  class="btn btn-block btn-lg btn-primary btn-lg">提交</button>
                </td>
            </tr>
        </table>
    </form>



    </div>
    
    <script th:src="@{/laydate.js}"></script>
    <script>
        laydate.render({
        elem: '#date'//指定元素
        ,format: 'yyyy-MM-dd' //可任意组合
        ,showBottom: true
  });



  window.onload=function(){
	//
	var date=document.getElementById("date");
	var type=document.getElementById("type");
    var name=document.getElementById("name");
    var summary=document.getElementById("summary");
    var detail=document.getElementById("detail");
    var postimg=document.getElementById("postimg");
    var submit = document.getElementById('submit');
	submit.onclick=function(){
		loginUser("http://localhost:8080/write");
	}
	var xmlhttp;
	function loginUser(path){ 
		if(window.XMLHttpRequest){
			
			xmlhttp=new XMLHttpRequest();
		}else if(window.ActiveXObject()){
		    
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		xmlhttp.open("POST",path,true);
		
		xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		
		xmlhttp.send("date="+date.value+"&amp;type="+type.value+"&amp;name="+name.value+"&amp;summary="+summary.value+"&amp;detail="+detail.value+"&amp;postimg="+postimg.value);
		
		xmlhttp.onreadystatechange=httpBack;
	}
	function httpBack(){
		
		if(xmlhttp.readyState==4){
         
			if(xmlhttp.status==200){
				var result=xmlhttp.responseText;
				if(result=="1"){
					alert("成功");
					//以键值对形式存储时的键
					// var strKey="username";
					// var storage=window.localStorage;
					// if(storage){
					// 	//本地存储，存储键值对
					// 	storage.setItem(strKey, name.value);
					// }else{
					// 	//cookie键值对存储
					// 	Cookie.write(strKey, name.value);
					// }
					// var path="http://localhost:8080/Book/main";
					// window.location.assign(path);
				}else if(result=="0"){
					alert("用户名或者密码错误");
				}
			}
		}
	}
}
    </script>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-xs-7">
                    <h3 class="footer-title">Subscribe</h3>
                    <p>Do you like this freebie? Want to get more stuff like this?<br/>
                        Subscribe to designmodo news and updates to stay tuned on great designs.<br/>
                        Go to: <a href="http://designmodo.com/flat-free" target="_blank">designmodo.com/flat-free</a>
                    </p>

                    <p class="pvl">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://designmodo.com/flat-free/" data-text="Flat UI Free - PSD&amp;amp;HTML User Interface Kit" data-via="designmodo">Tweet</a>
                        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
                        <iframe src="http://ghbtns.com/github-btn.html?user=designmodo&amp;repo=Flat-UI&amp;type=watch&amp;count=true" height="20" width="107" frameborder="0" scrolling="0" style="width:105px; height: 20px;" allowTransparency="true"></iframe>
                        <iframe src="http://ghbtns.com/github-btn.html?user=designmodo&amp;repo=Flat-UI&amp;type=fork&amp;count=true" height="20" width="107" frameborder="0" scrolling="0" style="width:105px; height: 20px;" allowTransparency="true"></iframe>
                        <iframe src="http://ghbtns.com/github-btn.html?user=designmodo&amp;type=follow&amp;count=true" height="20" width="195" frameborder="0" scrolling="0" style="width:195px; height: 20px;" allowTransparency="true"></iframe>
                    </p>

                    <a class="footer-brand" href="http://designmodo.com" target="_blank">
                        <img src="docs/assets/img/footer/logo.png" alt="Designmodo.com" />
                    </a>
                </div> <!-- /col-xs-7 -->

                <div class="col-xs-5">
                    <div class="footer-banner">
                        <h3 class="footer-title">Get Flat UI Pro</h3>
                        <ul>
                            <li>Tons of Basic and Custom UI Elements</li>
                            <li>A Lot of Useful Samples</li>
                            <li>More Vector Icons and Glyphs</li>
                            <li>Pro Color Swatches</li>
                            <li>Bootstrap Based HTML/CSS/JS Layout</li>
                        </ul>
                        Go to: <a href="http://designmodo.com/flat" target="_blank">designmodo.com/flat</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>